import React from "react";
import Clipboard from "@react-native-community/clipboard";
import {
    DeviceEventEmitter,
    Dimensions,
    Image,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";
import CountDown from "../../widgets/CountDown";
import LinearGradient from "react-native-linear-gradient";
import Images from "../../images/Images";
import { inject, observer } from "mobx-react";
import { AppModal } from "../../widgets/modal";
import RequestUtil from "../../utils/RequestUtil";
import screen from "../../utils/screen";
import Api from "../../utils/Api";
import { AppInfo, getffly, numDiv, numMulti } from "../../utils/common";
import Constants from "../../utils/Constants";

const { width, height } = Dimensions.get('window');

@inject(['userStore'])
@observer
export default class ActivityShareFission extends React.Component{
    state={
        config:{},
        share:{}
    }
    componentDidMount = () =>{
        var self = this;

        this.refresh();

        RequestUtil.get(Api.invitePage).then(res=>{
            var data = res.data;
            self.setState({
                share: data.share
            });
            AppModal.hideTip()
        },error=>{
            AppModal.hideTip()
            AppModal.showError(error.msg)
            console.log('team error',error)
        })

    }
    componentWillUnmount = () =>{

    }
    refresh(){
        AppModal.showLoading();
        RequestUtil.get(Api.homeData).then(res=>{
            console.log("page/index::" + JSON.stringify(res));
            AppModal.hideTip()
            var data = res.data
            if(data.activityShareFission){
                AppInfo.activityShareFission = data.activityShareFission;
                this.setState({
                    config: data.activityShareFission
                })
                console.log("activityShareFission::" + JSON.stringify(data.activityShareFission));
            }
            else{
                this.props.navigation.pop()
            }

        },error=>{
            console.log('task error',error)
            console.log("error11" + JSON.stringify(error));
            AppModal.hideTip();
            AppModal.showError( error.msg);
        })
    }
    start()
    {
        var self = this;
        AppModal.showLoading();

        RequestUtil.get(Api.activitySharefissionStart).then(data=>{
            console.log("activity/sharefission/start::" + JSON.stringify(data));
            AppModal.hideTip()
            AppModal.showTip(Constants.activity.activity_start);
            this.refresh()
        },error=>{
              AppModal.hideTip()
              AppModal.showTip(error.msg)
              console.log('sharefission error',error)
          })
    }
    receive()
    {
        var self = this;
         AppModal.showLoading();

          RequestUtil.get(Api.activitySharefissionRecieve).then(data=>{
             console.log("activity/sharefission/recieve::" + JSON.stringify(data));
             AppModal.hideTip()
             AppModal.showTip(Constants.activity.congratulations);
             AppInfo.activityShareFission = null;
             this.props.navigation.pop()
         },error=>{
               AppModal.hideTip()
               AppModal.showTip(error.msg)
               DeviceEventEmitter.emit("update_home", "")
               console.log('sharefission error',error)
           })
    }
    render() {
        var progressw = 0;
        if(this.state.config && this.state.config.target)
        {
            var progress = numDiv(this.state.config.balance,this.state.config.target);
            progressw = screen.scaleSize(Number(numMulti("550",progress)));
            console.log('sharefission.progress:' + progress)
            console.log('sharefission.progressw:' + progressw)
        }
        return (
            <View style={styles.container}>
                <View style={{ width: screen.width, height: screen.statusBarHeight ,backgroundColor:'#FFFFFF'}}></View>
                <View style={{ width: screen.width, height: screen.PIXEL_88, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' ,backgroundColor:'#FFFFFF'}}>
                    <TouchableOpacity activeOpacity={0.7} style={{ position: 'absolute', left: 0 }} onPress={() => {
                        this.props.navigation.pop();
                    }} >
                        <View style={{ width: screen.PIXEL_88, height: screen.PIXEL_88, justifyContent: 'center', alignItems: 'center' }}>
                            <Image
                                source={Images.back}
                                style={{ width: screen.PIXEL_20, height: screen.PIXEL_20 }}
                            />
                        </View>
                    </TouchableOpacity >
                    <View style={{ height: screen.PIXEL_40, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', position: 'absolute' }}>
                        <Text style={{fontFamily:getffly("medium"), color: '#377C74', fontSize: 16, lineHeight: screen.PIXEL_40 }}>{Constants.team.referral_reward}</Text>
                    </View>
                    <View style={{ width:screen.width,height: screen.onePixel,backgroundColor:'#DEDEDE', position: 'absolute',bottom:0 }}></View>
                </View>
                <ScrollView
                    style={{flex:1,marginBottom:screen.PIXEL_200}}
                    contentContainerStyle={{
                        paddingVertical:screen.PIXEL_20,
                        paddingHorizontal:screen.PIXEL_40,
                    }}
                >
                    <View style={{ flex: 1, width:screen.PIXEL_650,flexDirection: 'column' ,alignItems:'center'}}>
                        <View style={{width:screen.PIXEL_650,backgroundColor:'#FFFFFF',borderRadius:screen.PIXEL_50,alignItems:'center',marginTop:screen.PIXEL_36}}>
                            <View style={{width:screen.PIXEL_600,height:screen.PIXEL_50,flexDirection:'row',justifyContent:'center',alignItems:'center',marginTop:screen.PIXEL_20}}>
                                <Text style={{fontFamily:getffly("regular"), fontSize:12,color:'#005652',lineHeight:screen.PIXEL_32,position:'absolute',left:screen.PIXEL_28}}>{Constants.activity.withdraw_tips}</Text>
                            </View>
                            <View style={{width:screen.PIXEL_600,height:screen.PIXEL_16,flexDirection:'row',justifyContent:'center',alignItems:'center',marginTop:screen.PIXEL_28}}>
                                <View style={{width:screen.PIXEL_550,height:screen.PIXEL_16,backgroundColor:'#EEF3F0',borderRadius:screen.PIXEL_10,position:'absolute',left:screen.PIXEL_28}}></View>
                                <LinearGradient colors={['#FF7012', '#FF7012']} start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} locations={[0, 1]} style={{ width: progressw, height: screen.PIXEL_16, borderRadius:screen.PIXEL_10,position:'absolute',left:screen.PIXEL_28}}>
                                </LinearGradient>
                            </View>
                            <View style={{width:screen.PIXEL_600,height:screen.PIXEL_40,flexDirection:'row',justifyContent:'center',alignItems:'center',marginTop:screen.PIXEL_8}}>
                                <Text style={{fontFamily:getffly("medium"), fontSize:16,color:'#0DC253',lineHeight:screen.PIXEL_40,position:'absolute',left:screen.PIXEL_28}}>{this.state.config.balance + "/" + this.state.config.target}</Text>
                                <Text style={{fontFamily:getffly("medium"), fontSize:16,color:'#FFA900',lineHeight:screen.PIXEL_40,position:'absolute',right:screen.PIXEL_230}}>{Constants.Appsymbol}</Text>
                            </View>
                            {
                                this.state.config.status == 'none' && <TouchableOpacity activeOpacity={0.8} style={{marginTop:screen.PIXEL_20}} onPress={() => {
                                    this.start();
                                }} >
                                    <LinearGradient colors={['#68B3AC', '#377C74']} start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} locations={[0, 1]} style={{ width: screen.PIXEL_550, height: screen.PIXEL_88, justifyContent: 'center', alignItems: 'center', borderRadius: screen.PIXEL_40 }}>
                                        <Text style={{ textAlign: 'center', fontFamily:getffly("bold"), fontSize: 14, color: '#FFFFFF', lineHeight: screen.PIXEL_40}}>{Constants.activity.start}</Text>
                                    </LinearGradient>
                                </TouchableOpacity >
                            }
                            {
                                this.state.config.balance < this.state.config.target && this.state.config.status == 'start' && <TouchableOpacity activeOpacity={0.8} style={{marginTop:screen.PIXEL_20}} onPress={() => {

                                }} >
                                    <LinearGradient colors={['#DEDEDE', '#DEDEDE']} start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} locations={[0, 1]} style={{ width: screen.PIXEL_550, height: screen.PIXEL_88, justifyContent: 'center', alignItems: 'center', borderRadius: screen.PIXEL_40 }}>
                                        <Text style={{ textAlign: 'center', fontFamily:getffly("bold"), fontSize: 14, color: '#FFFFFF', lineHeight: screen.PIXEL_40}}>{Constants.team.receive}</Text>
                                    </LinearGradient>
                                </TouchableOpacity >
                            }
                            {
                                this.state.config.balance >= this.state.config.target && this.state.config.status == 'start' && <TouchableOpacity activeOpacity={0.8} style={{marginTop:screen.PIXEL_20}} onPress={() => {
                                    this.receive();
                                }} >
                                    <LinearGradient colors={['#68B3AC', '#377C74']} start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} locations={[0, 1]} style={{ width: screen.PIXEL_550, height: screen.PIXEL_88, justifyContent: 'center', alignItems: 'center', borderRadius: screen.PIXEL_40 }}>
                                        <Text style={{ textAlign: 'center', fontFamily:getffly("bold"), fontSize: 14, color: '#FFFFFF', lineHeight: screen.PIXEL_40}}>{Constants.team.receive}</Text>
                                    </LinearGradient>
                                </TouchableOpacity >
                            }
                            {
                                this.state.config.status === 'start' && <View style={{width:screen.PIXEL_650, paddingTop:screen.PIXEL_28, paddingBottom:screen.PIXEL_28, flexDirection:'row',justifyContent:'center',alignItems:'center',backgroundColor:'#377C74',marginTop:screen.PIXEL_50}}>
                                    <CountDown timeLabelStyle={'#FFFFFF'} digitTxtStyle={'#FFFFFF'} until={this.state.config.leftSecond} size={20} timeLabels={{d: Constants.activity.days, h: Constants.activity.hours, m: Constants.activity.minutes, s: Constants.activity.seconds}} />
                                </View>
                            }
                            <View style={{width:screen.PIXEL_650,flexDirection:'row', marginTop:screen.PIXEL_28, padding:screen.PIXEL_5, marginBottom:screen.PIXEL_28}}>
                                <Text style={{width:screen.PIXEL_650,fontFamily:getffly("regular"), color: '#005652', fontSize: 12, lineHeight: screen.PIXEL_28,marginLeft:screen.PIXEL_8}}>{this.state.config.rules}</Text>
                            </View>
                        </View>
                    </View>
                </ScrollView>
                <View style={{ width:width, height: screen.PIXEL_160, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',backgroundColor:'#FFFFFF',position:'absolute', bottom:0, left:0, right:0 }}>
                    <View style={{width:screen.PIXEL_700,height:screen.PIXEL_32,flexDirection:'row',marginTop:screen.PIXEL_20,alignItems:'center'}}>
                        <Text style={{fontFamily:getffly("regular"), fontSize:12,color:'#005652',lineHeight:screen.PIXEL_28,marginLeft:screen.PIXEL_28}}>{Constants.team.referral_link}</Text>
                    </View>
                    <View style={{width:screen.PIXEL_700,height:screen.PIXEL_72,flexDirection:'row',alignItems:'center',marginTop:screen.PIXEL_12}}>
                        <Text numberOfLines={2} style={{width:screen.PIXEL_400,fontFamily:getffly("bold"), textAlign:'left',fontSize:14,color:'#377C74',lineHeight:screen.PIXEL_36,marginLeft:screen.PIXEL_28}}>{this.state.share.link ? this.state.share.link : ''}</Text>
                        <TouchableOpacity activeOpacity={0.8} style={{position:'absolute',right:screen.PIXEL_28}} onPress={() => {
                                if (this.state.share.link) {
                                    Clipboard.setString(this.state.share.link);
                                    AppModal.showTip(Constants.team.link_copied)
                                }
                            }} >
                            <LinearGradient colors={['#68B3AC', '#377C74']} start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} locations={[0, 1]} style={{ width: screen.PIXEL_160, height: screen.PIXEL_64, justifyContent: 'center', alignItems: 'center', borderRadius: screen.PIXEL_40 }}>
                                <Text style={{ textAlign: 'center', fontFamily:getffly("bold"), fontSize: 14, color: '#FFFFFF', lineHeight: screen.PIXEL_40}}>{Constants.common.copy}</Text>
                            </LinearGradient>
                        </TouchableOpacity >
                    </View>
                </View>
            </View>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F4F8F9',
        flexDirection: 'column',
        alignItems: 'center'
    },
    list:
    {
        // marginBottom:gScreen.bottom + screen.PIXEL_40,
    },
});
